<template>
  <view class="tab-list">
    <view
      class="tab-item"
      v-for="(item, index) in classifyList"
      :key="index"
      @click="handleTab(item, index)"
    >
      <view
        class="tab-name"
        :style="{
          color:
            activeTab == index
              ? propsData.params.defaultTab.fontCss.color
              : propsData.params.subtitleTab.defaultTitleColor,
        }"
        >{{ item.title }}</view
      >
      <view
        class="tab-active-line"
        :class="activeTab == index ? 'show-line' : ''"
        :style="{ backgroundColor: propsData.params.defaultTab.activeColor }"
      ></view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    classifyList: {
      type: Array,
      default: [],
    },
    activeTab: {
      type: Number,
      default: 0,
    },
    propsData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },

  computed: {
    tabTitleCss() {
      let style = this.propsData.params.defaultTab.fontCss;
      if (style?.fontNum) {
        style.fontSize = `${style.fontNum * 2}rpx`;
      }
      return style;
    },
  },
  methods: {
    handleTab(item, index) {
      this.$emit("changeTab", { item, index });
    },
  },
};
</script>

<style scoped lang="scss">
.tab-list {
  width: 93.6%;
  height: 10.67vw;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  margin: 0 auto;
  // justify-content: space-around;
  .tab-item {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 8%;
    flex-shrink: 0;
    .tab-name {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #262626;
    }
    .tab-active-line {
      width: 8vw;
      height: 0.8vw;
      background-color: #fa2c1b;
      margin-top: 3rpx;
      border-radius: 0.4vw;
      opacity: 0;
    }
    .show-line {
      opacity: 1;
    }
  }
  .tab-item:last-child {
    margin-right: 0;
  }
}
.tab-list::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
</style>
